<template>
  <div class="spec-preview">
    <!-- 将组件当成标签进行使用 -->
    <!-- high-url：以后需要放大的图片 -->
    <!-- width: 选择器宽度 -->
    <!-- height: 选择器高度 -->
    <vue-photo-zoom-pro :width="200" :height="200" :out-zoomer="true" :high-url="secImg || imgUrl">
      <!-- src 就是正常的图片 -->
      <img :src="secImg || imgUrl" />
    </vue-photo-zoom-pro>
  </div>
</template>

<script>
// 导入放大镜组件
import VuePhotoZoomPro from 'vue-photo-zoom-pro'
// 导入放大镜组件相应的css样式
import 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'
export default {
  name: 'SphZoom',
  data() {
    return {
      secImg: ''
    }
  },
  components: {
    // 注册组件
    VuePhotoZoomPro
  },
  props: {
    imgUrl: {
      type: String
    }
  },
  mounted() {
    // 监听 发射的自定义事件.监听事件是否被触发
    this.$eventBus.$on('sendImg', (imgUrl) => {
      // console.log(imgUrl)
      // 将
      this.secImg = imgUrl
    })
  }
}
</script>

<style lang="less">
.spec-preview {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;

  img {
    width: 400px;
    height: 400px;
  }

  .out-zoomer {
    top: 0px !important;
    z-index: 99;
  }

  .selector {
    background-color: rgba(248, 152, 152, 0.2);
  }
}
</style>
